<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
	<!--
		Step #5
			- 3단계 작업을 배너 정보의 개수만큼 반복
			
		Step #4
			- 첫 번째 배너 패널 생성
			
		Step #3
			- 배너 정보의 개수 파악
			
	 	Step #2
	 		- jQuery, Ajax 개발 환경 설정
	 		
		Step #1
			- 배너 목록을 JSON 포맷으로 생성
	-->
<style>
	#banner_container{
		position:relative;
		width:128px;
		
		height:128px;
		border:1px solid #cccccc;
		top:100px;
		left:100px;
		overflow:hidden;
		
	}
	
	#banner_container div{
		position:absolute;
		width:128px;
		height:128px;
		
		top:0;
		background:#ffffff;
		opacity:0.5;
	}
	
	
</style>

<script  type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script  type="text/javascript"  src="../libs/jquery.easing.1.3.js"></script>
<script type="text/javascript">    

	var ANIMATION_DURATION = 500;
	var IMAGE_HEIGHT = 128;
	
	var $bannerItems;	
	var $bannerContainer;
	
	var nCurrentIndex;
	var nBannerCount;
	var nTimerID;
	
	window.onload = function(){
		/*
			 기존 내용을 모두 없애 줍니다.
			// 요소 초기화.	
			this.init();
			// 배너 위치 설정하기.
			this.setBannerPosition();
			// 배너 움직이기.
			this.startMove();
		*/	
		this.startLoadFile();
		
	}
	
	function startLoadFile(){
		// 1. 브라우저에 따른 XMLHttpRequest생성하기.
		xmlHttp = createXMLHTTPObject();
		
		// 2. 요청에 대한 응답처리 이벤트 리스너 등록.
		xmlHttp.onreadystatechange = on_ReadyStateChange;
		
		// 3.서버로 보낼 데이터 생성.
		
		// 4. GET 방식으로 데이터 보내기, 응답은 비동기로 클라이언트<->서버간의 연결 요청준비.
		xmlHttp.open("GET", "banner.json", true);
		
		// 5. 실제 데이터 전송.
		xmlHttp.send(null);
	}
	
	// 1. 브라우저에 따른 XMLHttpRequest생성하기.
	function createXMLHTTPObject()
	{
		var xhr = null;
		if (window.XMLHttpRequest) {
			// IE7버전 이상, Chrome, Safari, Firefox, opera등 거의 대부분의 브라우저에서는
			// XMLHttpRequest객체를 제공합니다.
			xhr = new XMLHttpRequest();
		}
		else {
			// IE6,IE5 버전에서는 아래와 같이 XMLHttpRequest객체를 생성해야 합니다.
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
			
		return xhr;
	}
		
		
	// 6.응답처리.
	function on_ReadyStateChange(){
		// 4=데이터 전송 완료.(0=초기화전,1=로딩중,2=로딩됨,3=대화상태)
		if(xmlHttp.readyState==4){
			//200은 에러 없음.(404=페이지가 존재하지 않음)
			if(xmlHttp.status==200){
		
				//7. 데이터 파싱처리.
				createImages(xmlHttp.responseText);
			}
			else{
				alert("처리중 에러가 발생했습니다.");
			}
		}
	}
	
	//7.JSON 포멧 데이터 처리.
	function createImages(strInfo){		
		//1. JSON 포멧 문자열을 JavaScript Object로 변경시키기.
		var objBannerInfo = eval("("+strInfo+")"); 
		// 전체 배너정보를 구합니다.
		var banners =  objBannerInfo.rows;		
		//alert("배너 정보 노드 갯수는 ? "+banners.length); 
		
		var strDOM = "";
		for(var i=0;i<banners.length;i++){
			//2.N번째 배너 정보를 구합니다.
			var banner = banners[i];
		
			//3. N번째 배너 패널을 생성합니다.
			strDOM +='<div>'
			strDOM +='	<img src="'+banner.url+'" alt="'+banner.title+'">';
			strDOM +='</div>';
		}
				
		//4.배너 컨테이너에 3번째에서 생성한 배너 패널을 추가합니다.
		var $bannerContainer = $("#banner_container");
		$bannerContainer.append(strDOM);	
	}
	
	
	// 요소 초기화.	
	function init(){
		// 계속해서 사용할 요소들이기 때문에 전역변수에 담아 둡니다.
		this.$bannerContainer = document.getElementById("#banner_container");
		this.$bannerItems = $("#banner_container div");
		this.nCurrentIndex = 0;
		this.nTimerID = 0;	
		// 전체 배너 갯수.
		this.nBannerCount = this.$bannerItems.length;	
	}

	// 현재배너와 다음배너의 위치를 초기화 시켜 줍니다.
	function setBannerPosition(){
		// 모든 배너의 위치값을 출력화면 영역에서 보이지 않도록 만든다. 
		this.$bannerItems.css({opacity:0, top:IMAGE_HEIGHT});	
		
		// 첫번째 배너=현재 버너를 화면에 활성화 시켜준다.
		this.$bannerItems.eq(0).css({opacity:1, top:0});
	}
	
	// 배너 움직이기.
	function startMove(){			
		this.nTimerID = setInterval(this.on_StartMove,1000)	
	}	
	
	// 다음 배너 계산하기.	
	function on_StartMove(){
		if(this.nCurrentIndex+1>=this.nBannerCount)
			this.showBannerAt(0);
		else
			this.showBannerAt(this.nCurrentIndex+1);			
	}

	// nIndex에 해당하는 배너를 현재배너로 활성화시킴.
	function showBannerAt(nIndex){
		if(this.nCurrentIndex==nIndex || nIndex<0 || nIndex>=this.nBannerCount)
			return;
		
		// 현재배너를 구한다.
		var $currentBanner = this.$bannerItems.eq(this.nCurrentIndex);
		// 다음배너를 구한다.
		var $nextBanner = this.$bannerItems.eq(nIndex);
		
		// 현재배너를 위쪽으로 움직이기.
		$currentBanner.animate({top:-IMAGE_HEIGHT,opacit:0},
			ANIMATION_DURATION,
			"easeOutQuint"
		);
				
		// 다음배너를 움직이기 전에, 다음배너위치의 시작위치 설정하기.
		$nextBanner.css({top:IMAGE_HEIGHT, opacity:0});
		
		$nextBanner.animate({top:0,opacity:1},
			ANIMATION_DURATION,
			"easeOutQuint"
		);
		
		// 현재배너 index값을 업데이트 시켜준다.
		this.nCurrentIndex = nIndex;
	}
	
</script>

</head>

<body>
	<div id="banner_container" >      	 
	</div>
</body>
</html>
